<template>
  <div>
      <p>input 元素：</p>
      <input v-model="message" placeholder="编辑我……">
      <p>消息是: {{ message }}</p>

      <p>textarea 元素：</p>
      <p style="white-space: pre">{{ message2 }}</p>
      <textarea v-model="message2" placeholder="多行文本输入……"></textarea>

      <p>单个复选框：</p>
      <input type="checkbox" id="checkbox" v-model="che">
      <label for="checkbox">{{ che }}</label>
     <p>多个复选框：</p>
      <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
      <label for="runoob">Runoob</label>
      <input type="checkbox" id="google" value="Google" v-model="checkedNames">
      <label for="google">Google</label>
      <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
      <label for="taobao">taobao</label>
      <br>
      <span>选择的值为: {{ checkedNames }}</span>
       <p>单选框 ：</p>
        <input type="radio" id="runoob" value="Runoob" v-model="picked">
        <label for="runoob">Runoob</label>
        <br>
        <input type="radio" id="google" value="Google" v-model="picked">
        <label for="google">Google</label>
        <br>
        <span>选中值为: {{ picked }}</span>
        <p>select ：</p>
      <select v-model="selected" name="fruit">
          <option value="">选择一个网站</option>
          <option value="www.runoob.com">Runoob</option>
          <option value="www.google.com">Google</option>
        </select>

        <div id="output">
            选择的网站是: {{selected}}
        </div>
  </div>
</template>

<script>
export default{
  name:"FormDemo",
  data(){
    return {
      msg:"form",
      message:"",
      message2:"",
      che:true,
      checkedNames:[],
      picked:"Runoob",
      selected:"",
    }
  }
}
</script>

<style>
</style>
